/**
* 作者 ：sunmeng
*
* 日期 ：2017/11/29
*
* 描述 ：系统管理组件 - 修改用户
*/
<template>
  <div class="dialogContent">
    <el-form class="updateUserForm" ref="updateUserForm" :rules="rules" label-position="right" label-width="110px" :updateUserformData="updateUserformData" :model="ruleForm">
      <el-row class="dialogBar">
        <el-col class="title">基本信息</el-col>
      </el-row>
      <el-row style="margin-top: 20px;width: 98%;">
        <el-col :span="8">
          <el-form-item label="登录名 :" prop="accound">
            <el-input v-model="ruleForm.accound"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名 :" prop="userName">
            <el-input v-model="ruleForm.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码 :" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;width: 98%;">
        <el-col :span="8">
          <el-form-item label="密码 :" prop="password">
            <el-input v-model="ruleForm.password" type="password" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="确认密码 :" prop="confirmPassword">
            <el-input v-model="ruleForm.confirmPassword" type="password" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别 :" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择" class="inputControl">
              <el-option key="1" label="男" value="1"></el-option>
              <el-option key="2" label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;width: 98%;">
        <el-col :span="8">
          <el-form-item label="电话号码 :" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Email :" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="dialogBar">
        <el-col class="title">所属部门</el-col>
      </el-row>
      <el-form-item label-width="0px" prop="sysDepartmentIds" style="margin-top: 20px;width: 98%;margin-left: 3%;">
        <el-col :span="8">
          <el-cascader
            expand-trigger="hover"
            :options="departmentOptions"
            v-model="ruleForm.sysDepartmentIds"
            change-on-select
            value="ruleForm.sysDepartmentIds"
            @change="handleChange">
          </el-cascader>
        </el-col>
      </el-form-item>
      <el-row class="dialogBar">
        <el-col class="title">角色设置</el-col>
      </el-row>
      <el-form-item label-width="0px" prop="sysRoleIds" style="margin-top: 20px;">
        <el-checkbox-group v-model="ruleForm.sysRoleIds" size="small">
          <el-checkbox-button :label="item.sysRoleId"  style="margin: 0 10px 10px 0;" v-for="item in powerList">{{item.sysRoleName}}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label-width="0px" style="margin-top: 20px;text-align: center;">
        <el-button class="moduleButton button" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button class="button" type="info" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import crypto from 'crypto'
  import roleAPIs from '../../../../api/roleAPIs'
  import departmentAPIs from '../../../../api/departmentAPIs'
  import userAPIs from '../../../../api/userAPIs'

  export default {
    props: ["options","parentModel","updateUserformData"],
    name: "updateUserForm",
    data () {
	    var validatePass = (rule, value, callback) => {
	    	console.log(rule)
	    	console.log(value)
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.confirmPassword !== '') {
            this.$refs.updateUserForm.validateField('confirmPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
        	accound:"",
        	password:"",
        	userName:"",
        	phone:"",
        	telephone:"",
        	sex:"",
        	email:"",
        	confirmPassword:"",
        	sysDepartmentIds:[],
        	sysRoleIds:[],
        	sysUserId:"",
          token:localStorage.token
        },
        rules: {
          accound: [
            { required: true, message: '请填写登录名', trigger: 'blur' }
          ],
          password: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          confirmPassword:[
          	{ required: true, validator: validatePass2, trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请填写手机号', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ]
        },
        powerList: [],
        createTimeToStart: +new Date("1971/01/01 00:00:00"),
        createTimeToEnd: +new Date(),
        departmentOptions:[]
      }
    },
    mounted: function(){
    	let vm = this,
        pageNo = 1,
        pageSize = 2000;

    	vm.ruleForm.accound = vm.$props.updateUserformData.accound
     // vm.ruleForm.password = vm.$props.updateUserformData.password
      vm.ruleForm.userName = vm.$props.updateUserformData.userName
      vm.ruleForm.phone = vm.$props.updateUserformData.phone
      vm.ruleForm.telephone = vm.$props.updateUserformData.telephone
      vm.ruleForm.sex = vm.$props.updateUserformData.sex
      vm.ruleForm.sysUserId = vm.$props.updateUserformData.sysUserId

      if(vm.$props.updateUserformData.sex == "1"){
      	vm.ruleForm.sex = "男"
      }else if(vm.$props.updateUserformData.sex == "2"){
      	vm.ruleForm.sex = "女"
      }else{
      	vm.ruleForm.sex = ""
      }
      vm.ruleForm.email = vm.$props.updateUserformData.email
      vm.ruleForm.sysDepartmentIds = vm.$props.updateUserformData.departments.split(",")
			vm.ruleForm.sysRoleIds = vm.$props.updateUserformData.roles ? vm.$props.updateUserformData.roles.split(",") : []
      roleAPIs.list({
        token: localStorage.token,
        pageNum:pageNo,
        pageSize:pageSize,
        createTimeToStart:vm.createTimeToStart,
        createTimeToEnd:vm.createTimeToEnd
      }).then(({ data }) => {
        if(data.code == 10000){
        	//console.log(data)
          vm.powerList = data.data
        }
      });
      departmentAPIs.listTree({
        token: localStorage.token
      }).then(({ data }) => {
        if(data.code == 10000) {
        	console.log(data)
          vm.departmentOptions = data.data

        }
      })
    },
    methods: {
      handleChange(value) {
        //console.log(value);
      },
      submitForm (formName) {
				let vm = this
				vm.$refs.updateUserForm.validate((valid) => {
					console.log(vm.ruleForm)
          if (valid) {
          	if(vm.ruleForm.sysDepartmentIds.length == 0){
          		vm.$message.warning("请选择所属部门")
          		return;
          	}else if(vm.ruleForm.sysRoleIds.length == 0){
          		vm.$message.warning("请设置角色")
          		return;
          	}else{
	          	vm.ruleForm.sysRoleIds = vm.ruleForm.sysRoleIds.length>1 ? vm.ruleForm.sysRoleIds.join(",") : ""
			        vm.ruleForm.sysDepartmentIds = vm.ruleForm.sysDepartmentIds.length>1 ? vm.ruleForm.sysDepartmentIds.pop() : ""
							vm.ruleForm.sex == "男" ? vm.ruleForm.sex="1" :vm.ruleForm.sex="2"
							userAPIs.update(vm.ruleForm).then(({data}) => {
								console.log(data.msg)
			          if(data.code==10000){
			            vm.$message.success("添加用户成功！");
			            vm.$refs.updateUserForm.resetFields()
			            vm.$parent.visible = false
			            vm.$props.parentModel.tableOptions.pageInfo.currentPage = 1
			            vm.$props.parentModel.userLoad(vm.$props.parentModel.tableOptions.pageInfo.currentPage, vm.$props.parentModel.tableOptions.pageInfo.pageSize)
			          }else{
			          	vm.$message({
				            type: 'warning',
				            message: data.msg
				          });
			          }
			       })
          	}
          } else {
            return false;
          }
        })
				
      },
      resetForm () {
      	this.$parent.visible = false
      	this.$refs.updateUserForm.resetFields()
      }
    }
  }
</script>
<style>
  .updateUserForm .button{
    width: 120px;
    margin-right: 5%;
  }
  .updateUserForm .el-checkbox-button .el-checkbox-button__inner{
    border: 0;
    border-radius: 0;
  }
</style>
